import FormItem from "antd/es/form/FormItem";
import { Select} from "antd";
import {useDrag} from "react-dnd";
import {removeSetter} from "../../../utils/removeSetter.ts";
import {CommonComponentProps} from "../../../../components/editor/interface.ts";
import {CSSProperties} from "react";
import {MoveDrop} from "../../../hooks/useMoveDrop.tsx";

export interface SelectProps extends CommonComponentProps {
    id: number;
    name: string;
    styles?: CSSProperties;
    parentId: number;
    children?: any;
    options:any[],
    mode:any[]
    label:any
    type:any,
    maxTagTextLength:number
    maxTagCount:number
    EditData:any
}

const SelectDev = (props: SelectProps) => {
    const {name,id, options, styles} = props

    const [_,drag] = useDrag({
        type:"Select",
        item:{
            id,
            type:name,
            dragType: "move"
        }
    })

    const ComponentProps = removeSetter({...props},["children","parentId"])

    return (
        <div className={'relative'}  style={styles} data-component-id={props.id} ref={drag}>
            <MoveDrop key={name} dropComponentId={id} parentId={props.parentId}  />
            <FormItem>
                <FormItem label={props.label} name={props.name} rules={props.rule} style={{margin: "0",...styles}}>
                    <Select {...ComponentProps}  options={options}/>
                </FormItem>
            </FormItem>
        </div>
    );
};

export default SelectDev;